<template>
  <view class="numbers-container">
    <view class="filter-bar">
      <picker @change="onRegionChange" :value="regionIndex" :range="regions">
        <view class="picker-view">
          {{ regions[regionIndex] || '选择地区' }}
          <image src="/static/icons/arrow-down.png" mode="widthFix"></image>
        </view>
      </picker>
      
      <picker @change="onPriceChange" :value="priceIndex" :range="priceRanges">
        <view class="picker-view">
          {{ priceRanges[priceIndex] || '价格排序' }}
          <image src="/static/icons/arrow-down.png" mode="widthFix"></image>
        </view>
      </picker>
    </view>
    
    <view class="numbers-list">
      <view class="number-card" v-for="(item, index) in numbers" :key="index">
        <view class="number-info">
          <text class="number">{{ item.number }}</text>
          <text class="region">{{ item.region }}</text>
        </view>
        
        <view class="price-info">
          <view class="price">
            <text class="symbol">¥</text>
            <text class="amount">{{ item.dailyPrice }}</text>
            <text class="unit">/天</text>
          </view>
          <text class="call-price">通话: {{ item.callPrice }}元/分钟</text>
        </view>
        
        <button 
          class="rent-btn" 
          :class="{ rented: item.rented }"
          @click="rentNumber(item)"
        >
          {{ item.rented ? '已租用' : '立即租用' }}
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 筛选数据
const regions = ['全国', '北京', '上海', '广州', '深圳', '杭州'];
const priceRanges = ['价格从低到高', '价格从高到低'];
const regionIndex = ref(0);
const priceIndex = ref(0);

// 号码数据
const numbers = ref([
  { 
    id: 1, 
    number: '17012345678', 
    region: '北京', 
    dailyPrice: 5.00, 
    callPrice: 0.2,
    rented: true
  },
  { 
    id: 2, 
    number: '17087654321', 
    region: '上海', 
    dailyPrice: 6.00, 
    callPrice: 0.18,
    rented: false
  },
  { 
    id: 3, 
    number: '17112378901', 
    region: '广州', 
    dailyPrice: 4.50, 
    callPrice: 0.22,
    rented: false
  },
  { 
    id: 4, 
    number: '17198765432', 
    region: '深圳', 
    dailyPrice: 5.50, 
    callPrice: 0.19,
    rented: false
  }
]);

// 筛选事件
const onRegionChange = (e) => {
  regionIndex.value = e.detail.value;
  // 实际项目中会根据选择的地区筛选号码
};

const onPriceChange = (e) => {
  priceIndex.value = e.detail.value;
  // 实际项目中会根据选择的价格排序方式重新排序
};

// 租用号码
const rentNumber = (item) => {
  if (item.rented) return;
  
  uni.showModal({
    title: '租用确认',
    content: `您确定要租用 ${item.number} 吗？\n每日租金: ¥${item.dailyPrice}\n通话费: ${item.callPrice}元/分钟`,
    success: (res) => {
      if (res.confirm) {
        // 实际项目中会调用后端接口完成租用
        item.rented = true;
        uni.showToast({ title: '租用成功', icon: 'success' });
      }
    }
  });
};
</script>

<style scoped>
.numbers-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.filter-bar {
  display: flex;
  background-color: #fff;
  padding: 15rpx 20rpx;
  border-bottom: 1px solid #eee;
}

.picker-view {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  color: #333;
  padding: 10rpx 0;
}

.picker-view image {
  width: 24rpx;
  height: 24rpx;
  margin-left: 8rpx;
}

.numbers-list {
  padding: 20rpx;
}

.number-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 25rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.number-info {
  margin-bottom: 20rpx;
}

.number {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-right: 15rpx;
}

.region {
  font-size: 26rpx;
  color: #666;
  background-color: #f5f5f5;
  padding: 5rpx 15rpx;
  border-radius: 15rpx;
}

.price-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.price {
  display: flex;
  align-items: baseline;
}

.symbol {
  font-size: 28rpx;
  color: #FF4D4F;
}

.amount {
  font-size: 36rpx;
  font-weight: bold;
  color: #FF4D4F;
}

.unit {
  font-size: 26rpx;
  color: #FF4D4F;
  margin-left: 5rpx;
}

.call-price {
  font-size: 26rpx;
  color: #666;
}

.rent-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #007AFF;
  color: #fff;
  font-size: 30rpx;
  border-radius: 8rpx;
}

.rent-btn.rented {
  background-color: #999;
}
</style>